<template>
  <div class="vw-user-create">
    <van-cell-group>
      <van-field disabled required
        label="账号" v-model="formFields.account"
      >
        <van-button slot="button" size="small" type="primary" @click="rndAccount">重选</van-button>
      </van-field>

      <van-field class="van-cell--center" placeholder="请输入姓名或商户名" name="name" required
        label="名称" v-model="formFields.name"
        :error="errors.has('name')" :error-message="errors.first('name')"
        data-vv-as="名称" v-validate="{required: true, regex: /^[0-9\u4e00-\u9fa5]{1,32}$/}"
      />

      <van-field class="van-cell--center" type="number" placeholder="请输入手机号" name="cellphone" required
        label="手机号" v-model="formFields.cellphone"
        :error="errors.has('cellphone')" :error-message="errors.first('cellphone')"
        data-vv-as="手机号" v-validate="{required: true, regex: /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/}"
      />

      <van-field class="van-cell--center" placeholder="请输入云付通" name="cloud_account" required
        label="云付通" v-model="formFields.cloud_account"
        :error="errors.has('cloud_account')" :error-message="errors.first('cloud_account')"
        data-vv-as="云付通" v-validate="{required: true, regex: /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/}"
      />

      <van-field class="van-cell--center" type="password" placeholder="请输入登陆密码" name="login_password" required
        label="登陆密码" v-model="formFields.login_password"
        :error="errors.has('login_password')" :error-message="errors.first('login_password')"
        data-vv-as="登陆密码" v-validate="{required: true, min: 6}"
      />

      <van-field class="van-cell--center" type="password" placeholder="请输入安全密码" name="safe_password" required
        label="安全密码" v-model="formFields.safe_password"
        :error="errors.has('safe_password')" :error-message="errors.first('safe_password')"
        data-vv-as="安全密码" v-validate="{required: true, min: 6}"
      />

      <van-field class="van-cell--center" type="number" placeholder="请输入验证码" name="captcha" required
        label="验证码" v-model="formFields.captcha"
        :error="errors.has('captcha')" :error-message="errors.first('captcha')"
        data-vv-as="验证码" v-validate="{required: true, min: 4, max: 4}"
      >
        <img slot="icon" style="width: 90px;height: 30px" :src="captchaImg" @click="onClickCaptcha" alt="验证码"/>
      </van-field>

      <van-field v-if="formFields.p_account" disabled required
        label="账号" v-model="formFields.p_account"
      />

      <van-button size="small" type="primary" :loading="onButtonLoading" @click="onSubmit" style="width: 100%;">注册</van-button>
    </van-cell-group>

    <van-cell-group v-if="formFields.p_account">
      <van-field class="van-cell--center" disabled
        label="推广链接" :value="config.referralLink"
      >
        <van-button slot="button" id="copyReferralLink" size="small" type="primary" @click="copyReferralLink" :data-clipboard-text="config.referralLink">复制</van-button>
      </van-field>

      <van-cell title="推广二维码" />
      <van-cell><qriously :value="config.referralLink" :size="200" /></van-cell>
    </van-cell-group>
  </div>
</template>


<script>
  import Vue from 'vue';
  import Clipboard from 'clipboard';
  import VueQriously from 'vue-qriously';
  import { Button, Cell, CellGroup, Field, Toast } from 'vant';
  import config from '@/config';
  import userApi from '@/api/user/index';

  export default {
    components: {
      [Button.name]: Button,
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup,
      [Field.name]: Field
    },
    data() {
      return {
        captchaImg: config.ajaxApi+'/captcha/gregwar?w=90&h=30&modules=frontend',
        onButtonLoading: false,
        formFields: {
          account: '',
          name: '',
          cellphone: '',
          cloud_account: '',
          login_password: '',
          safe_password: '',
          captcha: '',
          p_account: ''
        },
        config
      }
    },
    methods: {
      copyReferralLink() {
        let clipboard = new Clipboard('#copyReferralLink');
        clipboard.on('success', function(e) {
          Toast('复制成功!');
          e.clearSelection();
        });
        clipboard.on('error', function(e) {
          Toast('复制失败!');
        });
      },
      onClickCaptcha() {
        this.captchaImg = config.ajaxApi+'/captcha/gregwar?w=90&h=30&modules=frontend&r='+Math.random();
      },
      rndAccount() {
        let n = 100000, m = 999999;
        this.formFields.account = Math.floor(Math.random()*(m-n+1)+n);
      },
      onSubmit() {
        this.onButtonLoading = true;

        this.$validator.validateAll().then((isValid) => {
          if(isValid) {
            userApi.create(this.formFields).then((data) => {
              Toast(data.msg);
              this.onButtonLoading = false;
              if(parseInt(data.code) !== 0) {return false; }
              this.formFields.name = '';
              this.formFields.cellphone = '';
              this.formFields.cloud_account = '';
              this.formFields.login_password = '';
              this.formFields.safe_password = '';
              this.formFields.captcha = '';
              this.rndAccount();
              this.onClickCaptcha();
              return true;
            });
          } else {
            Toast('请输入必要栏目');
            this.onButtonLoading = false;
          }

          return;
        });
      }
    },
    mounted() {
      Vue.use(VueQriously);

      this.rndAccount();
      this.formFields.p_account = this.$route.query.p_account;
      this.config.referralLink += '?p_account='+this.$route.query.p_account;
    }
  }
</script>

<style>
.vw-user-create {
  padding-bottom: 64px;
}
</style>
